<template>
  <div>
    <el-dialog
      :title="$t('CustomerManagementLang.related')"
      :visible.sync="Visible"
      width="1000px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="headerBox">
            <span class="operateBtnGroup" style="flex:1;overflow:hidden;min-width:80px;height: 28px;">
              <span
                class="operateBtnItem"
                @click="selectItem"
              >
                <img
                :src="$baseUrl + '/image/add.png'"
                />
                <span class="text">{{ $t('common.select_btn') }}</span>
              </span>
              <span
                class="operateBtnItem"
                @click="delItem"
              >
                <img
                :src="$baseUrl + '/image/bullet_cross.png'"
                />
                <span class="text">{{ $t('common.del') }}</span>
              </span>
            </span>
        </div>
        <MyTable
          ref="CustomerManagement_related"
          :tableColumn="tableColumn"
          :tableData="tableData"
          :isOrder="false"
          @sendCurrentData="setCurrent"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
        </MyTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <SelectUser
      @success="getTableData"
      ref="selectUser"
    ></SelectUser>
  </div>
</template>

<script>
import SelectUser from "./CustomerManagement_related_select";
export default {
  components: { SelectUser },
  props: {
    // 接收绑定参数
    
    midHight: [Number,String],
  },
  data() {
    return {
      filterData:{
        uid:'',
      },
      Visible: false,
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.Name'),
          prop: "name",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.code'),
          prop: "nickname",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.Telephone'),
          prop: "mobile",
          width: 120,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.email'),
          prop: "email",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.sale'),
          prop: "belong_sale",
          width: 80,
          order:"",
        },
      ],
      tableData: [],
      sendDataObj:[],
    };
  },
  created() {
    
  },
  mounted() {},
  watch: {
  },
  methods: {
    init(data) {
      this.uid=data.uid
      this.Visible = true;      
      this.getTableData();
    },
    //获取表格数据
    getTableData(){
      this.$get('getRelatedBindedMembers',{uid:this.uid}).then((res) => {
        this.tableData=res.data
      })
    },
    selectItem(){
      this.$refs.selectUser.init(this.uid)
    },
    delItem(){
      if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
        this.$message.warning(this.$t('common.message_warn_text'));
      } else {
        if (this.sendDataObj.uid==this.uid) {
          this.$message.warning(this.$t('CustomerManagementLang.delete_prompt'));
        } else {
          let params = new FormData();
            params.append("uid", this.sendDataObj.uid);
          this.$postForm("unbindMember", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.getTableData();
            }
          });
        }
      }
    },
    setCurrent(data){
      this.sendDataObj=data
    },
    //取消修改
    cancel(){
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
.headerBox {
    height: 38px;
    transition: max-height 0.5s ease-out;
    margin-bottom: 15px;
    box-shadow: 0px 0px 2px#ccc;
    background-color: #EBEEF3;
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .buttonGroup{
        min-width: 40px;
        display: flex;
        justify-content: flex-end;
        color: #474849;
        font-size: 14px;
        margin-right: 30px;
        cursor: pointer;
        gap: 10px;
        .shu{
            border-left: 1px solid #7D8592;
        }
        .buttonGroupItem{
            display: flex;
            align-items: center;
            .icon_style{
                margin-right: 5px;
            }
        }
    }
}
</style>